<!--
 - Author : wang885298.
 - Date   : 2019/4/2.
 - File   : relate.荔波天网打点关联楼栋页面
 -->

<template>
  <div class="relateWrap">
    <!--选择菜单-->
    <div class="bar"  v-if="state==='0'">
      <el-row>
        <el-col :span="6">楼栋名称：
          <el-input class="w65" v-model="ldxxMc" clearable placeholder="请输入楼栋名称"></el-input></el-col>
        <el-col :span="8">乡/镇/街道：
          <el-select class="w65" clearable v-model="xzjdId" placeholder="请选择">
            <el-option
                v-for="xingBie in liboStreetList"
                :key="xingBie.streetId"
                :label="xingBie.cn"
                :value="xingBie.streetId">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-button class="search-btn" type="primary" round @click="buildingInfoListInit(1)">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <!--结果表格-->
    <div class="relate-table" v-if="state==='0'">
      <el-table
          ref="multipleTable"
          :data="buildingInfoList"
          tooltip-effect="dark"
          style="width: 100%">
        <el-table-column
            width="35">
        </el-table-column>
        <el-table-column
            label="楼栋名称"
            width="650"
            show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.louDongMc }}</template>
        </el-table-column>
        <el-table-column
            prop="huShu"
            label="户数"
            align="center">
        </el-table-column>
        <el-table-column
            prop="juMingShu"
            label="居民数"
            align="center">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center">
          <template slot-scope="scope">
            <span class="cur l-green" @click="operateLouDong3dGL('01', scope.row)">选择关联</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="relate-page">
        <el-pagination
            @size-change="handleCurrentChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="totalCount">
        </el-pagination>
      </div>
    </div>
    <!--已关联楼栋-->
    <div v-if="state==='1'">
      <div class="relateTitle">已关联楼栋</div>
      <div class="related" v-for="(build,num) in buildingInfoList" :key="num">
        <div class="related-left">
          <div class="related-left-item">
            楼栋名称<span>{{build.louDongMc}}</span>
          </div>
          <div class="related-left-item">
            户数<span>{{build.huShu}}</span>
          </div>
          <div class="related-left-item">
            居民数<span>{{build.juMingShu}}</span>
          </div>
        </div>
        <div class="related-right">
          <span @click="cancelGL('02', build)">取消关联</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        state: '0',
        currentPage: 1,
        pageSize: 10,
        ldxxMc: '',
        guanLianMdzj: this.$route.query.pointId || window.localStorage.getItem('pointId'),
        totalCount: 100,
        liboStreetList: [],
        xzjdId: '',
        buildingInfoList: []
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.buildingInfoListInit(this.currentPage)
        this.getLiboStreetList()
      },
      handleCurrentChange(val) {
        this.buildingInfoListInit(val)
      },
      /**
       * 初始化楼栋信息
       * @author wang885298
       * @createTime 2019/04/03
       */
      buildingInfoListInit (currentPage) {
        var params = {
          guanLianMdzj: this.guanLianMdzj,
          page: currentPage,
          pageSize: this.pageSize
        }
        if (this.ldxxMc) {
          params['ldxxMc'] = this.ldxxMc
        }
        if (this.xzjdId) {
          params['xzjdId'] = this.xzjdId
        }
        this.$request.louDongGLListGet(params)
          .then(res => {
            console.log(res, 'getLoudongList')
            this.buildingInfoList = res.recordList
            this.totalCount = res.totalCount
            this.state = res.countResultMap.isGl
            console.log('this.state', this.state)
          })
          .catch(error => {
            console.log(error)
          })
      },
      /**
       * 获取街道id
       * @author wang885298
       * @createTime 2019/04/04
       */
      getLiboStreetList () {
        this.$request.getLiboStreetList({}).then(res => {
          this.liboStreetList = res
          console.log('getLiboStreetList', res)
        })
      },
      /**
       * 3d打点关联、解除关联
       * @param state
       * @param item
       */
      operateLouDong3dGL(state, item) {
        let text
        text = (state === '01') ? '关联成功！' : '解除关联成功！'
        var params = {
          glzt: state,
          guanLianMdzj: this.guanLianMdzj,
          ldxxZj: item.ldxxZj
        }
        this.$request.louDong3dGL(params)
          .then(res => {
            this.init()
            this.$message({
              type: 'success',
              message: text
            })
            window.websocket.send(JSON.stringify({state, relationData: item.ldxxZj, success: true}))
          })
          .catch(error => {
            console.log(error)
            this.$message({
              type: 'info',
              message: error
            })
            window.websocket.send(JSON.stringify({state, success: false}))
          })
      },
      /**
       * 解除关联
       * @param state
       * @param item
       */
      cancelGL(state, item) {
        this.$confirm('是否确认取消当前楼栋关联？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.operateLouDong3dGL(state, item)
        }).catch(() => {
        })
      }
    }
  }
</script>

<style ref="stylesheet/less" lang="less">
  .relateWrap{
    background: #212d3f;
    height: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    /*工具栏样式*/
    .bar{
      color: #fff;
      font-size: 16px;
      .w65{
        width: 65%;
      }
      .search-btn{
        font-size: 16px;
        padding: 10px 45px;
        background: -webkit-linear-gradient(left, #088eec, #17b3e7) !important;
        background: -o-linear-gradient(right, #088eec, #17b3e7) !important;
        background: -moz-linear-gradient(right, #088eec, #17b3e7) !important;
        background: linear-gradient(to right, #088eec, #17b3e7) !important;
      }
    }
    /*表格重写样式*/
    .relate-table{
      margin-top: 30px;
      .el-table{
        color: #fff !important;
        font-size: 15px;
      }
      .el-table tbody th, .el-table tbody tr{
        background: #1b2d40 !important;
      }
      .el-table td, .el-table th.is-leaf{
        border-bottom: 1px solid #ebeef554 !important;
      }
      .el-table td, .el-table th{
        padding: 20px 0 !important;
      }
      .el-table--border::after, .el-table--group::after, .el-table::before{
        background-color: #ebeef514 !important;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #0b2843;
        color: #fff;
      }
      .el-table thead tr{
        background: linear-gradient(to right, #088eec, #17b3e7) !important;
      }
      .el-table thead th{
        background: none !important;
        color: #fff !important;
        font-size: 16px !important;
      }
      .el-table__empty-block{
        background: #1b2d40 !important;
      }
    }
    .cur{
      cursor: pointer;
    }
    .cur:hover{
      opacity: 0.8;
    }
    .l-green{
      color: #00ffff;
      padding: 0 2px;
    }
    .cancel-btn{
      color: #ffd005;
    }
    /*分页重写样式*/
    .relate-page{
      text-align: right;
      margin-top: 25px;
      .el-pager li{
        background: transparent;
        color: #657b8d;
        min-width: 0;
        margin: 0 3px;
      }
      .el-pagination .btn-next, .el-pagination .btn-prev{
        padding-right: 5px;
        background-color: transparent;
        color: #657b8d;
      }
      .el-input__inner{
        border-color: #657b8d;
        background-color: transparent;
        width: 80%;
        height: 20px;
        color: #657b8d;
        border-radius: 0;
      }
      .el-pagination__jump{
        color: #657b8d;
      }
      .el-pager li.active {
        color: #00ffff;
        border-bottom: 1px solid #00ffff;
      }
      .btn-prev .el-icon-arrow-left:before {
        content: '\4E0A\4E00\9875';
      }
      .btn-next .el-icon-arrow-right:before {
        content: '\4E0B\4E00\9875';
      }
    }
    /*已关联楼栋样式*/
    .relateTitle{
      color: #fff;
      font-size: 20px;
      position: relative;
      padding: 0 6px;
      &:before{
        position: absolute;
        left: -7px;
        top: 1px;
        content: '';
        width: 4px;
        height: 26px;
        margin-right: 5px;
        background: #38b5ee;
      }
    }
    .related{
      margin: 20px 0;
      display: flex;
      /*justify-content: space-between;*/
      color: #fff;
      font-size: 16px;
      align-items: center;
      &-left{
        display: flex;
        width: 70%;
        &-item{
          /*margin-right: 55px;*/
          flex: 1;
          color: #00f1ff;
          span{
            margin-left: 8px;
            font-size: 20px;
            color: #fff;
          }
        }
        &-item:first-child{
          flex: 6;
        }
      }
      &-right{
        margin-left: 80px;
        span{
          display: inline-block;
          border-radius: 25px;
          background: linear-gradient(to right, #088eec, #17b3e7);
          padding: 10px;
          color: #fff;
          width: 144px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
</style>
